<%@ include file="/common/taglibs.jsp"%>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Admin Home</title>
<meta name="menu" content="MainMenu"/>
<script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="scripts/highchart/js/highcharts.js"></script>
<!--script type="text/javascript" src="scripts/highchart/js/modules/exporting.js"></script-->
<script type="text/javascript" src="scripts/highchart/js/themes/dark-blue.js"></script>

<style type="text/css">
.table tr.odd {
    background: #eee;
    border-top: 1px solid #c0c0c0;
    color: #000000;
}

.table tr.even {
    background: #fff;
    border-top: 1px solid #c0c0c0;
    color: #000000;
	}
	
	div.search_results{
				float: left;
				padding-left: 2px;
				width: 905px;
				border: 0px solid gray;
			}

		div.left_div{
				float: left;
				padding-left: 2px;
				width: 370px;
				margin-bottom: 15px;
				height: 250px;
				border: 0px solid gray;
			}
			div.right_div{
				float: left;
				padding-left: 2px;
				
				width: 515px;
				margin-left: 15px;
				margin-bottom: 15px;
				height: 250px;
				border: 1px solid gray;
			}
	
	
</style>

<script type="text/javascript">

var barChartInfo =[ 
		{
            name: 'Male',
            data: [5, 3, 4, 7, 2,8]
        }, {
            name: 'Female',
            data: [3, 4, 4, 2, 5, 10]
        }
       ];

	   
var piechartinfo = {
                            type: 'pie',
                            data: []
                    };


$(function () {
	
    var chart;
	var chart1;
	
    $(document).ready(function() {
     
		function requestData()
	    {
			if (typeof(chart) == 'undefined') 
	    	{
	    	  setTimeout(requestData, 1000);   
	    	}
	    	else{
			$.ajax({
				url: 'resources/adminHome.action',
				success: function(response) {
						     var response = JSON.parse(response);
						     chart.addSeries(response[0]); 
							 chart.addSeries(response[1]); 
				},
					cache: false
				});
	     
	    	}
	    }
	 
	 
	 chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column',
                events: {
					load: requestData
					}
		    },
            title: {
                text: 'Zone Wise Birth Status (Last Six Months )'
            },
            xAxis: {
                categories:  ['Laxmi Nager', 'Dharampeth', 'Hanuman Nager', 'Dhantoli', 'Nehru Nager','Gandhibagh' ,'Saranjipura','Lakadganj','Aasinagar','Managlwari'] 
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total Births'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -100,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        'Total: '+ this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    }
                }
            },
			
	     });
		
		$(document).ready(function() {
     
		/* function requestData()
	    {
			if (typeof(chart) == 'undefined') 
	    	{
	    	  setTimeout(requestData, 1000);   
	    	}
	    	else{
			$.ajax({
				url: 'resources/adminHome.action',
				success: function(response) {
						     var response = JSON.parse(response);
						     chart.addSeries(response[0]); 
							 chart.addSeries(response[1]); 
				},
					cache: false
				});
	     
	    	}
	    } */
	 
	 
	 function round(n,dec) {
	 
	// alert(n);
	n = parseFloat(n);
	if(!isNaN(n)){
		if(!dec) var dec= 0;
		var factor= Math.pow(10,dec);
		return Math.floor(n*factor+((n*factor*10)%10>=5?1:0))/factor;
	}else{
		return n;
	}
}
	 
	 function requestData1()
	    {
	    	if (typeof(chart) == 'undefined') 
	    	{
	    	  setTimeout(requestData1, 1000);   
	    	}
	    	else{
		
			$.ajax({
				url: 'resources/chart.action',
				success: function(point) {
						//alert('Test '+ point);
						  var response = JSON.parse(point);
						  
						  
						  var mCount = round((100/(response.Male + response.Female) * response.Male),2) ;
						  var fCount = round((100 - mCount),2) ;
						  //alert(mCount);
						  //alert(fCount);
						  piechartinfo.data.push(['Female', mCount]);
						  piechartinfo.data.push(['Male',fCount]);
						  chart1.addSeries(piechartinfo); 
						  
						 },
					cache: false
				});
	     
	    	}
	    }
	 
	 chart1 = new Highcharts.Chart({
	            chart: {
	                renderTo: 'container1',
	                plotBackgroundColor: null,
	                plotBorderWidth: null,
	                plotShadow: false,
						events: {
						load: requestData1
						}
	            },
	            title: {
	                text: 'Male-Female Ratio'
	            },
	            tooltip: {
					formatter: function() {
	                            return '<b>'+ this.point.name +'</b>: '+ round(this.percentage, 2) +' %';
	                        }
					
		        },
	            plotOptions: {
	                pie: {
	                    allowPointSelect: true,
	                    cursor: 'pointer',
	                    dataLabels: {
	                        enabled: true,
	                        color: '#CCC',
							connectorWidth : 2,
							connectorPadding : 2, 
	                        connectorColor: '#CCC',
					        formatter: function() {
	                            return '</br> '+this.point.name +'</br>:'+round(this.percentage, 2)+'%';
	                        }
	                    }
	                }
	            },
	            series: [piechartinfo]
	        });
		
	});
  });
});
                                 
	
</script>

	
</head>
<body class="home">
<!--
<h2><fmt:message key="hospital.home"/></h2>
-->
<div class="left_div" >
	<div id="container1" style="min-width: 370px; height: 250px; margin: 0 auto"></div>
</div>
<div class="right_div" >
	
	<div class="portlet-container" style="width:510px;margin-top:2px;height: 225px;">
			<div class="portlet-header">
				<div class="fltleft">
					<h3>STATISTICS (Last Six Months)</h3>
				</div>
			</div>
			<div class="portlet-content" style="margin-top:5px;">
			
			<display:table name="adminStatus" 
                   pagesize="10" class="table table-condensed" export="false" style="width: 99%" >
	        <display:column property="label" style="font-size: 14px; font-family:verdana; font-weight:bold; width: 70%" />
	        <display:column property="value" style="font-size: 15px; font-family:sarif; font-weight:bold; text-align:right; width: 25%" /> 
		
			<display:setProperty name="paging.banner.all_items_found" value=""/>
			<display:setProperty name="basic.show.header" value="false"/>
			
			</display:table>				
				
	    </div>	
     </div>	 
	
	
	
</div>

<div class="search_results">
		<div id="container" style="min-width: 300px; height: 275px; margin: 0 auto"></div>
</div>

</body>	